<template>
  <div class="panel fly-column">
    <div class="layui-container">
      <ul class="layui-clear">
        <router-link class="layui-hide-xs" to="/index" tag="li"><a href="">首页</a></router-link>
        <router-link class="layui-hide-xs" v-for="(item, index) in list" :key="'panel' + index" tag="li" :to="item.path">
          <a href="">
            {{item.name}}
            <span class="layui-badge-dot" v-if="item.isNew"></span>
          </a>
        </router-link>
        <template v-if="isLogin">
          <li class="layui-hide-xs"><span class="line"></span></li>
          <li class="layui-hide-xs"><a href="">我发表的贴</a></li>
          <li class="layui-hide-xs"><a href="">我收藏的贴</a></li>
        </template>
      </ul>
      <div class="layui-hide-xs right">
        <span class="layui-icon layui-icon-search"></span>
        <a href="" class="layui-btn new-btn">发表新帖</a>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Panel',
  data () {
    return {
      isLogin: this.$store.state.isLogin,
      list: [{
        name: '提问',
        path: '/index/ask',
        isNew: false
      }, {
        name: '分享',
        path: '/index/share',
        isNew: false
      }, {
        name: '讨论',
        path: '/index/discuss',
        isNew: true
      }, {
        name: '建议',
        path: '/index/advise',
        isNew: false
      }, {
        name: '公告',
        path: '/index/notice',
        isNew: false
      }, {
        name: '动态',
        path: '/index/logs',
        isNew: false
      }]
    };
  }
};
</script>
<style scoped lang="scss">
@media (max-width: 768px) {
  .panel {
    height: auto;
  }
  ul {
    li {
      width: 33.3%;
    }
  }
}
@media (max-width: 1000px) {
  .right {
    display: none;
  }
  a {
      padding: 0 18px!important;
  }
}
.panel {
  position: relative;
  height: 50px;
  line-height: 50px;
  margin-bottom: 15px;
  border-radius: 2px;
  background-color: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
ul {
  li {
    display: inline-block;
    a {
      padding: 0 20px;
      font-size: 16px;
    }
    .line {
      display: inline-block;
      width: 1px;
      height: 20px;
      margin: 0 10px;
      background-color: #cccccc;
      vertical-align: middle;
    }
  }
}
.right {
  position: absolute;
  top: 0;
  right: 0;
  .layui-icon-search {
    margin-right: 20px;
    font-size: 20px;
    &:hover {
      color: #5fb878;
      cursor: pointer;
    }
  }
  .new-btn {
    height: 36px;
    margin-top: -4px;
  }
}
</style>
